<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单列表</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card class="box-card">
        <el-row>
          <el-col :span="8">
             <el-input placeholder="请输入内容" class="input-with-select"  clearable>
               <el-button slot="append" icon="el-icon-search"></el-button>
             </el-input>
          </el-col>
        </el-row>
        <el-table :data="Orders" border stripe>
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column label="订单编号" prop="order_number"></el-table-column>
          <el-table-column label="订单价格" prop="order_price" width="180"></el-table-column>
          <el-table-column label="是否付款" width="180">
            <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.order_pay === '0'">未付款</el-tag>
            <el-tag type="success" v-else>已付款</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="是否发货" prop="is_send" width="180"></el-table-column>
          <el-table-column label="下单时间" width="180">
               <template slot-scope="scope">
              {{ scope.row.update_time | formatTime}}
               </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template>
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="editAdress"></el-button>
              <el-button @click="showpreviewDilog" type="success" icon="el-icon-delete-location" size="mini"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
        :data="queryData"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryData.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryData.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
       </el-pagination>
      </el-card>
      <el-dialog
      title="修改地址"
      :visible.sync="EditdialogVisible"
      width="30%">
      <el-form>
        <el-form-item label="省市区/县">
           <el-cascader
           v-model="Addressvalue"
           :options="cityData"></el-cascader>
        </el-form-item>
      </el-form>
       <span slot="footer" class="dialog-footer">
    <el-button @click="EditdialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="EditdialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
<el-dialog
  title="查看物流进度"
  :visible.sync="previewdialogVisible"
  width="30%">
  <el-timeline :reverse="reverse" :label="false">
    <el-timeline-item
      v-for="(activity, index) in expressList"
      :key="index"
      :timestamp="activity.timestamp">
      {{activity.content}}
    </el-timeline-item>
  </el-timeline>
  <span slot="footer" class="dialog-footer">
    <el-button @click="previewdialogVisible = false">取 消</el-button>
    <el-button type="primary">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import cityData from './citydata.js'
export default {
  data () {
    return {
      queryData: {
        //  显示条数
        pagenum: 1,
        //  当前页码
        pagesize: 10
      },
      Orders: [],
      total: 0,
      cityData,
      EditdialogVisible: false,
      Addressvalue: '',
      previewdialogVisible: false,
      expressList: ''
    }
  },

  created () {
    this.getOder()
  },

  methods: {
    async getOder () {
      const { data: res } = await this.axios.get('orders', {
        params: this.queryData
      })
      this.Orders = res.data.goods
      this.total = res.data.total
    },
    handleSizeChange (val) {
      this.queryData.pagesize = val
      this.getOder()
    },
    handleCurrentChange (val) {
      this.queryData.pagenum = val
      this.getOder()
    },
    editAdress () {
      this.EditdialogVisible = true
    },
    async showpreviewDilog () {
      this.previewdialogVisible = true
      const { data: res } = await this.axios.get('http://localhost:8083/api/express')
      if (res.meta.status !== 200) return this.$message.error('获取数据失败')
      this.expressList = res.data
    }
  }
}
</script>

<style scoped lang='less'>

</style>
